import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
  PageContainer,
  ProTable,
  StatisticCard,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import React, { useRef, useState } from 'react';
import { getReportDetailUiPage, getReport } from './service';
import { useModel, useRequest, useSearchParams } from '@umijs/max';
import CustomCode from '@/components/CustomCode';
import ImagePreview from '@/components/ImagePreview';
import CustomPie from './components/CustomPie'
const { Statistic, Divider } = StatisticCard;

const TableList: React.FC = () => {
  const [searchParams] = useSearchParams()
  const reportId = searchParams.get("reportId")
  const [form] = Form.useForm()
  const actionRef = useRef<ActionType>();

  const { data, loading } = useRequest(() => {
    return getReport({ id: reportId })
  })

  const columns: ProColumns<any>[] = [
    {
      title: 'ID',
      fixed: 'left',
      valueType: 'indexBorder',
      width: 80,
    },
    {
      title: '报告ID',
      dataIndex: 'reportId',
    },
    {
      title: '执行状态',
      dataIndex: 'executeState',
      valueType: 'select',
      valueEnum: {
        true: { text: '成功', status: 'success' },
        false: { text: '失败', status: 'error' },
      }
    },
    {
      title: '断言状态',
      dataIndex: 'assertionState',
      valueType: 'select',
      valueEnum: {
        true: { text: '成功', status: 'success' },
        false: { text: '失败', status: 'error' },
      }
    },
    {
      title: '异常信息',
      dataIndex: 'exceptionMsg',
      render(dom, entity, index, action, schema) {
        return <CustomCode width={340} height={120} value={dom} />
      },
    },
    {
      title: '消耗时间',
      dataIndex: 'expandTime',
    },
    {
      title: '序号',
      dataIndex: 'num',
    },
    {
      title: '用例ID',
      dataIndex: 'caseId',
    },
    {
      title: '步骤名称',
      dataIndex: 'name',
    },
    {
      title: '步骤操作类型',
      dataIndex: 'operationType',
    },
    {
      title: '截图url',
      dataIndex: 'screenshotUrl',
      render: (text: any, record: any) => {
        return <ImagePreview imgUrl={record?.screenshotUrl} />
      },
    },
    {
      title: 'UI元素定位类型',
      dataIndex: 'locationType',
    },
    {
      title: 'UI元素定位表达式',
      dataIndex: 'locationExpress',
    },
    {
      title: '元素查找最长等待时间',
      dataIndex: 'elementWait',
    },
    {
      title: '目标UI元素定位类型',
      dataIndex: 'targetLocationType',
    },
    {
      title: '目标UI元素定位表达式',
      dataIndex: 'targetLocationExpress',
    },
    {
      title: '目标元素查找最长等待时间',
      dataIndex: 'targetElementWait',
    },
    {
      title: '步骤值',
      dataIndex: 'value',
    },
    {
      title: '预期属性',
      dataIndex: 'expectKey',
    },
    {
      title: '预期值',
      dataIndex: 'expectValue',
    },
    {
      title: '步骤描述',
      dataIndex: 'description',
    },
    {
      title: '断言失败是否继续执行',
      dataIndex: 'isContinue',
      valueType: 'select',
      valueEnum: {
        true: { text: '是' },
        false: { text: '否' },
      }
    },
    {
      title: '是否截图',
      dataIndex: 'isScreenshot',
      valueType: 'select',
      valueEnum: {
        true: { text: '是' },
        false: { text: '否' },
      }
    },

    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      valueType: 'dateTime',
    },
    {
      title: '修改时间',
      dataIndex: 'gmtModified',
      valueType: 'dateTime',
    },
  ];

  const valueEnum = {
    EXECUTE_SUCCESS: { text: '执行成功', status: 'success' },
    EXECUTING: { text: '执行中', status: 'processing' },
    COUNTING_REPORT: { text: '统计报告', status: 'processing' },
    EXECUTE_FAIL: { text: '执行失败', status: 'error' },
  }

  return (
    <PageContainer>
      <StatisticCard.Group
        style={{ marginBottom: 24 }}
        loading={loading}
        direction={'row'}>
        <StatisticCard
          statistic={{
            title: '执行总数',
            value: data?.quantity,
            status: valueEnum[data?.executeState]?.status,
            tip: valueEnum[data?.executeState]?.text,
          }}
        />
        <Divider type={'vertical'} />
        <StatisticCard
          statistic={{
            title: '成功数量',
            value: data?.passQuantity,
            description: <Statistic title="占比" value={Number(data?.passQuantity / data?.quantity * 100).toFixed(2) + '%'} />,
          }}
          chart={
            <CustomPie type="success" quantity={data?.quantity} current={data?.passQuantity} />
          }
          chartPlacement="left"
        />
        <StatisticCard
          statistic={{
            title: '失败数量',
            value: data?.failQuantity,
            description: <Statistic title="占比" value={Number(data?.failQuantity / data?.quantity * 100).toFixed(2) + '%'} />,
          }}
          chart={
            <CustomPie type="error" quantity={data?.quantity} current={data?.failQuantity} />
          }
          chartPlacement="left"
        />
      </StatisticCard.Group>

      <ProTable<any>
        actionRef={actionRef}
        rowKey="id"
        search={false}
        toolBarRender={false}
        scroll={{ x: 'max-content' }}
        request={async ({ pageSize, current, ...params }) => {
          const res = await getReportDetailUiPage({
            current,
            pageSize,
            ...params,
            reportId,
            type: 'UI'
          })
          const total = res?.data?.totalRecords || 0
          const data = res?.data?.currentData || []

          return {
            data,
            total,
          }
        }}
        columns={columns}

      />
    </PageContainer>
  );
};

export default TableList;
